<template>
  <div class="chatroom">
    <van-sticky>
      <van-nav-bar
        :title="user.name"
        left-text=""
        @click-left="onClickLeft"
        left-arrow
      ></van-nav-bar>
    </van-sticky>

    <div class="chat">
      <div class="chat-main">
        <div class="chat-ls" v-for="(item, index) in msgs" :key="index">
          <div class="chat-time">{{ changetime(item.time) }}</div>
          <div class="msg msg-left" v-if="item.id != user.id">
            <img :src="item.icon" alt="" />
            <div class="message" v-if="item.types == 0">
              <div class="msg-text">{{ item.message }}</div>
            </div>
            <div class="message" v-if="item.types == 1">
              <div class="msg-text">
                <img
                  :src="item.message"
                  alt=""
                  @click="getImg(item.mesage, index)"
                />

              </div>
            </div>
          </div>

          <div class="msg msg-right" v-if="item.user_id ==user.id">
            <img :src="localicon" alt="" />
            <div class="message" v-if="item.types == 0">
              <div class="msg-text">{{ item.message }}</div>
            </div>
            <div class="message" v-if="item.types == 1">
              <div class="msg-text"><img :src="item.message" alt=""  @click="getImg(item.message, index)"/></div>
            </div>
            <div class="message" v-if="item.types == 3">
              <div class="msg-text"><video :src="item.message" controls="controls"></video></div>
            </div>
          </div>
        </div>

        <div class="ipt">
          <van-sticky style="position: fixed; bottom: 0; right: 0; left: 0; z-index: 99">
            <van-field
              left-icon="phone-o"
              v-model="newmessage"
              ref="iptmsg"
              @keydown.enter.native="getValue"
              rows="1"
              autosize
              type="textarea"
              placeholder="友善发言哦~"
            >
              <template #button>
                <van-button @click="getValue" size="small" type="primary"
                  >发送</van-button
                >
              </template>
              <template #right-icon>
                <van-icon name="add-o" @click="addimg" />
                <van-popup
                  v-model="showimg"
                  position="bottom"
                  :style="{ height: '30%' }">
                    <van-grid square>
                      <van-grid-item>
                        <van-uploader :after-read="afterRead">
                        <img class="sentimages" src="../../assets/img/sentimg.png" alt="" />
                        <p>发送图片</p>
                        </van-uploader>
                      </van-grid-item>
                    </van-grid>
                </van-popup>
              </template>
            </van-field>
          </van-sticky>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "../../router";
import { ImagePreview } from "vant";
import axios from 'axios';
import { Toast } from 'vant';
// 全局注册

export default {
  data() {
    return {
      localicon:'',
      value: "",
      show: false,
      index: 0,
      images: [ ],
      newmessage: "",
      fri_id:'',
      showimg: false,
       user:{
        id:'',
        icon:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17qq.com%2Fimg_qqtouxiang%2F87511483.jpeg&refer=http%3A%2F%2Fwww.17qq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623313760&t=bddd032f9a2982c432f2f52bc3eba9b3',
        name:'请登录',
      },
      msgs: [],
    };
  },
    created() {
    this.user.id=localStorage.getItem('user_id')
    axios.get("http://localhost:3000/get_user",{
        params:{
         id:this.user.id
        } 
      })
      .then(res=>{
        console.log(res.data.data);
        res=res.data.data.userlist[0]
        this.localicon=res.icon
      });


    axios.get("http://localhost:3000/chat?id=" + this.$route.params.id)
      .then((res) => {
        console.log(res);
        this.msgs=res.data.data
        var res=res.data.data[0]
        this.fri_id=res.fri_id
        this.user.name=res.name        
});


  },
  methods: {
    onClickLeft() {
      router.go(-1);
    },
    changetime: function (data) {
      var date = new Date(data);

      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let strDate = M + D + h + m;
      return strDate;
    },

    onChange(index) {
      this.index = index;
    },
    getImg(images, index) {
      ImagePreview({
        images: this.images,
        showIndex: true,
        loop: false,
        startPosition: index,     
      });
     
    },
    getValue() {
      
      axios.get("http://localhost:3000/send_chat",{
        params:{
          user_id:this.user.id,
          message:this.newmessage,
          types:0,
          fri_id:this.fri_id
        }
      })
      .then((res) => {
        Toast.success('发送成功')  
        location.reload()
        // this.msgs=res.data.data
  
});
      
    },
    addimg() {
      this.showimg = true;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.newmessage = file.content;
      this.msgs.push({
         id: "1000",
        message: this.newmessage,
        types: "1",
        time: new Date() - 1000,
      });
      console.log(this.msgs);
      this.newmessage = "";

      
    },
  },
};
</script>

<style scoped>
.body{
  background-color: black;
}
.chat {
  padding: 5px;
  background: #d4d1d140;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-time {
  text-align: center;
  font-size: 14px;
  color: #00000040;
}
.msg img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 8px;
}
.msg-left {
  display: flex;
  align-items: center;
}
.msg-right {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.msg {
  margin-bottom: 20px;
}
.msg-right .message {
  background-color: rgb(244, 208, 0);
}
.message {
  max-width: 280px;
  background-color: white;
  border-radius: 10px;
}
.msg-text {
  line-height: 30px;
  padding: 8px;
}
.ipt {
  margin-top: 100%;
}
.msg-text img {
  border-radius: 0;
  padding: 0px;
  height: 100px;
  width: auto;
}
.msg-text video{
  width: 100%;
}
.sentimages {
  width: 50px;
      margin-top: 30px;
    margin-bottom: -10px;
}
</style>